<template>
  <div class="rank-page">
    <div class="rank-header">
      <div class="header-particles">
        <div class="particle" v-for="n in 20" :key="n"></div>
      </div>
      
      <div class="rank-header-content">
        <div class="header-icon"></div>
        <h2>榜单探索</h2>
        <div class="rank-subtitle">
          <span class="subtitle-text">发现激情</span>
          <span class="subtitle-divider">•</span>
          <span class="subtitle-text">挑战旅程</span>
        </div>
        
        <div class="section-intro">
          <div class="intro-badge">精选榜单</div>
          <h3>探索最受欢迎的登山胜地</h3>
          <p>基于真实数据统计，为您推荐最值得挑战的山峰</p>
        </div>
      </div>
      
      <div class="rank-list">
        <div class="rank-card" v-for="board in boards" :key="board.type">
          <div class="rank-card-header">
            <div class="rank-card-icon" :class="`icon-${board.type}`">
              <svg v-if="board.type === 'difficulty'" viewBox="0 0 24 24" fill="none">
                <path d="M12 2L15.09 8.26L22 9L15.09 9.74L12 16L8.91 9.74L2 9L8.91 8.26L12 2Z" fill="currentColor"/>
              </svg>
              <svg v-else-if="board.type === 'hot'" viewBox="0 0 24 24" fill="none">
                <path d="M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.04L12 21.35Z" fill="currentColor"/>
              </svg>
              <svg v-else viewBox="0 0 24 24" fill="none">
                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z" fill="currentColor"/>
              </svg>
            </div>
            <div class="rank-card-title">{{ board.title }}</div>
            <div class="rank-card-desc">
              <span v-if="board.type === 'difficulty'">挑战极限</span>
              <span v-else-if="board.type === 'hot'">高分推荐</span>
              <span v-else>热门收藏</span>
            </div>
          </div>
          
          <div class="rank-scenic-list">
            <router-link 
              v-for="(scenic, idx) in getBoardScenics(board)" 
              :key="scenic.id" 
              :to="`/homepage/scenic/${scenic.id}`"
              class="rank-scenic-card"
              :class="`rank-${idx + 1}`"
            >
              <div class="scenic-image-container">
                <div class="rank-top-badge" :class="`badge-${idx + 1}`">
                  <span class="badge-text">TOP{{ idx + 1 }}</span>
                </div>
                <img class="rank-scenic-img" :src="scenic.img" :alt="scenic.name" />
                <div class="image-overlay"></div>
                
                <!-- 皇冠图标仅显示在前三名 -->
                <div v-if="idx < 3" class="crown-icon" :class="`crown-${idx + 1}`">
                  <svg viewBox="0 0 24 24" fill="none">
                    <path d="M5 16L3 6L8.5 12L12 4L15.5 12L21 6L19 16H5Z" fill="currentColor"/>
                  </svg>
                </div>
              </div>
              
              <div class="scenic-info">
                <div class="rank-scenic-name">{{ scenic.name }}</div>
                
                <!-- 仅好评榜显示点赞数 -->
                <div v-if="board.type === 'good'" class="scenic-likes">
                  <el-icon class="metric-icon">
                    <StarFilled />
                  </el-icon>
                  <span class="metric-text">{{ scenic.likeCount }} 点赞</span>
                </div>
                
                <!-- 仅热门榜显示收藏数 -->
                <div v-if="board.type === 'hot'" class="scenic-favorites">
                  <el-icon class="metric-icon">
                    <StarFilled />
                  </el-icon>
                  <span class="metric-text">{{ scenic.favoriteCount }} 收藏</span>
                </div>

                <!-- 展示难度指数，仅难度榜显示 -->
                <div v-if="board.type === 'difficulty'" class="scenic-difficulty">
                  <div class="difficulty-label">难度指数</div>
                  <el-rate 
                    :model-value="scenic.comprehensive_difficulty_index" 
                    :max="5" 
                    disabled 
                    allow-half
                    class="gradient-rate"
                  />
                </div>
              </div>
              
              <!-- 悬浮效果文字 -->
              <div class="hover-text">查看详情</div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { StarFilled } from '@element-plus/icons-vue';

export default {
  components: {
    StarFilled
  },

  name: "Rank",
  data() {
    return {
      boards: [
        {
          type: 'difficulty',
          title: '难度榜',
          topScenics: []
        },
        {
          type: 'hot',
          title: '热门榜',
          topScenics: []
        },
        {
          type: 'good',
          title: '好评榜',
          topScenics: []
        }
      ],
      allScenics: [],
      likeScenics: [], // 存储点赞数据
      favoriteScenics: [] // 存储收藏数据
    }
  },
  mounted() {
    this.fetchScenicsFromAPI(); // 获取难度榜和热门榜的基础数据
    this.fetchScenicLikeCount(); // 获取点赞数据
    this.fetchScenicFavoriteCount(); // 获取收藏数据
  },
  methods: {
async fetchScenicFavoriteCount() {
  try {
    // 修改这里的URL，使用正确的API端点路径
    const response = await axios.get('http://localhost:8080/sf/scenicFavoriteCount');
    const favoriteCounts = response.data;
    
    // 映射数据到前端需要的格式
    this.favoriteScenics = favoriteCounts.slice(0, 5).map(item => ({
      id: item.scenicSpotId,  // 注意：这里需要确认返回的数据结构中字段名是否正确
      name: item.scenicAreaName,
      img: 'https://via.placeholder.com/200x140',
      favoriteCount: item.favoriteCount
    }));
  } catch (error) {
    console.error('获取景区收藏数据失败:', error);
    // API调用失败时，设置空数组，使页面能正常渲染
    this.favoriteScenics = [];
  }
},

    async fetchScenicLikeCount() {
      try {
        const response = await axios.get('http://localhost:8080/sclike/scenicLikeCount');
        const likeCounts = response.data;
        
        // 映射数据到前端需要的格式
        this.likeScenics = likeCounts.slice(0, 5).map(item => ({
          id: item.scenicSpotId,
          name: item.scenicAreaName,
          img: 'https://via.placeholder.com/200x140',
          likeCount: item.likeCount
        }));
      } catch (error) {
        console.error('获取景区点赞数据失败:', error);
      }
    },

async fetchScenicsFromAPI() {
  try {
    // 确保使用正确的端点路径
    const response = await axios.get('http://localhost:8080/mw/ScenicSpotList');
    this.allScenics = response.data;

    // 为每个榜单设置对应的数据
    this.boards[0].topScenics = this.getBoardScenics(this.boards[0]);
    this.boards[1].topScenics = this.getBoardScenics(this.boards[1]);
    this.boards[2].topScenics = this.getBoardScenics(this.boards[2]);
  } catch (error) {
    console.error('获取景区数据失败:', error);
  }
},
    getBoardScenics(board) {
      // 工具函数：获取图片完整URL
      function getValidImageUrl(scenic) {
        if (Array.isArray(scenic.scenicSpotImageLinks) && 
            scenic.scenicSpotImageLinks.length > 0) {
          const link = scenic.scenicSpotImageLinks[0];
          
          // 处理相对路径
          if (link.startsWith('/')) {
            // 使用Vue环境变量获取基础URL
            const baseUrl = process.env.VUE_APP_API_BASEURL || 'http://localhost:8080';
            return baseUrl + link;
          }
          return link;
        }
        return 'https://via.placeholder.com/200x140';
      }

      // 难度榜
      if (board.type === 'difficulty') {
        return [...this.allScenics]
          .sort((a, b) => (b.comprehensiveDifficultyIndex || 0) - (a.comprehensiveDifficultyIndex || 0))
          .slice(0, 5)
          .map(scenic => ({
            id: scenic.scenicSpotId,
            name: scenic.scenicAreaName,
            img: getValidImageUrl(scenic),
            comprehensive_difficulty_index: scenic.comprehensiveDifficultyIndex
          }));
      }
      // 热门榜
      else if (board.type === 'hot') {
        if (this.favoriteScenics.length > 0) {
          return this.favoriteScenics.map(favoriteScenic => {
            const scenic = this.allScenics.find(item => item.scenicSpotId === favoriteScenic.id);
            return {
              id: favoriteScenic.id,
              name: favoriteScenic.name,
              img: scenic ? getValidImageUrl(scenic) : 'https://via.placeholder.com/200x140',
              favoriteCount: favoriteScenic.favoriteCount
            };
          });
        } else {
          return [...this.allScenics]
            .slice(0, 5)
            .map(scenic => ({
              id: scenic.scenicSpotId,
              name: scenic.scenicAreaName,
              img: getValidImageUrl(scenic)
            }));
        }
      }
      // 好评榜
      else if (board.type === 'good') {
        if (this.likeScenics.length > 0) {
          return this.likeScenics.map(likeScenic => {
            const scenic = this.allScenics.find(item => item.scenicSpotId === likeScenic.id);
            return {
              id: likeScenic.id,
              name: likeScenic.name,
              img: scenic ? getValidImageUrl(scenic) : 'https://via.placeholder.com/200x140',
              likeCount: likeScenic.likeCount
            };
          });
        } else {
          return [...this.allScenics]
            .slice(0, 5)
            .map(scenic => ({
              id: scenic.scenicSpotId,
              name: scenic.scenicAreaName,
              img: getValidImageUrl(scenic),
              likeCount: 0
            }));
        }
      }
      return [];
    }
  }
}
</script>
<style scoped>
/* 整体页面样式 */
.rank-page {
  padding: 0;
  margin: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
.rank-page::before {
  content: '';
  position: fixed;
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: 
    linear-gradient(135deg, rgba(74, 144, 226, 0.8), rgba(107, 91, 149, 0.8)), 
    url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80') center/cover;
  z-index: 0;
  pointer-events: none;
}
.rank-page > * {
  position: relative;
  z-index: 1;
}

/* 头部样式 */
.rank-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  position: relative;
  width: 100%;
  padding: 120px 20px 20px;
  overflow: hidden;
  background: none;
  min-height: auto;
}
.header-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}
.particle:nth-child(odd) {
  animation-delay: -2s;
}
.particle:nth-child(even) {
  animation-delay: -4s;
}
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0; }
  50% { transform: translateY(-100px) rotate(180deg); opacity: 1; }
}

/* 头部内容 */
.rank-header-content {
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
  max-width: 800px;
  width: 100%;
  text-align: center;
}
.rank-header h2 {
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: 6px;
  margin: 0 0 15px 0;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.rank-subtitle {
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 2px;
  margin-bottom: 25px;
  opacity: 0.9;
}
.subtitle-text {
  display: inline-block;
}
.subtitle-divider {
  margin: 0 15px;
  opacity: 0.7;
}

/* section-intro样式 */
.section-intro {
  margin-top: 15px;
  padding: 0 20px;
  margin-bottom: 25px;
}
.intro-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}
.section-intro h3 {
  font-size: 1.6rem;
  font-weight: 400;
  margin: 0 0 10px 0;
  color: white;
  letter-spacing: 2px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.section-intro p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 15px 0;
  line-height: 1.6;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* 榜单列表样式 - 修改了最大宽度和padding */
.rank-list {
  position: relative;
  max-width: 1500px; /* 从1300px增加到1500px */
  margin: 0 auto;
  padding: 20px 30px 40px; /* 左右padding从60px减少到30px */
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 30px;
}

.rank-card {
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  position: relative;
  padding: 25px;
  width: 100%; /* 确保卡片宽度填满容器 */
}
.rank-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}
.rank-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  gap: 15px;
}
.rank-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.rank-card-icon.icon-difficulty {
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
}
.rank-card-icon.icon-hot {
  background: linear-gradient(135deg, #ff9500, #ffa726);
}
.rank-card-icon.icon-good {
  background: linear-gradient(135deg, #4ecdc4, #44b3d1);
}
.rank-card-icon svg {
  width: 24px;
  height: 24px;
}
.rank-card-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}
.rank-card-desc {
  font-size: 1rem;
  color: #666;
  font-weight: 500;
}

/* 景点列表样式 - 修改了卡片宽度和间距 */
.rank-scenic-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr)); /* 设置最小宽度为220px */
  gap: 20px;
  width: 100%;
}

@media (max-width: 1400px) {
  .rank-scenic-list {
    grid-template-columns: repeat(5, minmax(200px, 1fr)); /* 在小屏幕上调整为200px */
  }
}

@media (max-width: 1200px) {
  .rank-scenic-list {
    grid-template-columns: repeat(4, minmax(220px, 1fr)); /* 4 columns */
  }
}

@media (max-width: 900px) {
  .rank-scenic-list {
    grid-template-columns: repeat(3, minmax(220px, 1fr)); /* 3 columns */
  }
}

@media (max-width: 700px) {
  .rank-scenic-list {
    grid-template-columns: repeat(2, minmax(220px, 1fr)); /* 2 columns */
  }
}

@media (max-width: 480px) {
  .rank-scenic-list {
    grid-template-columns: 1fr; /* 1 column */
  }
}

.rank-scenic-card {
  background: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 20px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  overflow: hidden;
  min-width: 0; /* 防止flex项目溢出 */
}
.rank-scenic-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
  border-color: rgba(147, 128, 200, 0.3);
}

.rank-scenic-card.rank-1 { border-color: rgba(255, 215, 0, 0.4); }
.rank-scenic-card.rank-2 { border-color: rgba(192, 192, 192, 0.4); }
.rank-scenic-card.rank-3 { border-color: rgba(205, 127, 50, 0.4); }

.scenic-image-container {
  position: relative;
  width: 100%;
  padding-bottom: 70%; /* 从60%增加到70%，使图片区域更高 */
  overflow: hidden;
  margin-bottom: 16px;
}
.rank-top-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 6px 12px;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}

.badge-1 { background: linear-gradient(135deg, #FFD700, #FFA500); }
.badge-2 { background: linear-gradient(135deg, #C0C0C0, #A9A9A9); }
.badge-3 { background: linear-gradient(135deg, #CD7F32, #D2691E); }
.badge-4, .badge-5 { background: linear-gradient(135deg, #9380c8, #b19cd9); }

.crown-icon {
  position: absolute;
  top: -5px;
  right: 12px;
  z-index: 4;
  width: 28px;
  height: 28px;
}
.crown-1 { color: #FFD700; }
.crown-2 { color: #C0C0C0; }
.crown-3 { color: #CD7F32; }
.crown-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.rank-scenic-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  border-radius: 12px;
}
.rank-scenic-card:hover .rank-scenic-img {
  transform: scale(1.05);
}
.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
  pointer-events: none;
}

.scenic-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rank-scenic-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scenic-likes, .scenic-favorites {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-weight: 500;
}
.scenic-likes {
  color: #f56c6c; /* 点赞数使用红色 */
}
.scenic-favorites {
  color: #e6a23c; /* 收藏数使用橙色以区分 */
}
.scenic-likes .el-icon,
.scenic-favorites .el-icon {
  color: inherit;
  font-size: 16px;
}
.gradient-rate .el-rate__icon {
  background: linear-gradient(120deg, #7f7fd5, #86a8e7, #91eac9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.scenic-difficulty {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.difficulty-label {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}

.hover-text {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(147, 128, 200, 0.9);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.rank-scenic-card:hover .hover-text {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}
/* Animation definition */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animation to each rank-card */
.rank-card {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
}

/* Staggered delays for each rank-card */
.rank-list .rank-card:nth-child(1) { animation-delay: 0.1s; }
.rank-list .rank-card:nth-child(2) { animation-delay: 0.3s; }
.rank-list .rank-card:nth-child(3) { animation-delay: 0.5s; }

/* 响应式设计 */
@media (max-width: 768px) {
  .rank-header {
    padding: 30px 15px 20px;
  }
  .rank-header h2 {
    font-size: 2.2rem;
    letter-spacing: 3px;
  }
  .section-intro h3 {
    font-size: 1.3rem;
  }
  .rank-list {
    padding: 15px 16px;
  }
  .rank-scenic-list {
    gap: 16px;
  }
}
@media (max-width: 480px) {
  .rank-header {
    padding: 25px 15px 15px;
  }
  .rank-header h2 {
    font-size: 1.8rem;
    letter-spacing: 2px;
  }
  .rank-subtitle {
    font-size: 0.95rem;
  }
  .rank-scenic-card {
    padding: 16px;
  }
}
</style>